<template>
  <div>
    <div class="table_header">
      <el-button type="primary" size="mini" @click="showUser('add')">新增</el-button>
    </div>
    <el-table :data="list" style="width: 100%" class="tableContent">
      <el-table-column prop="username" label="用户名" class="backColor"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
      <el-table-column prop="create_time" label="创建时间" :formatter="getRealDate"></el-table-column>
      <el-table-column prop="prop" label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="delUser(scope.row)">删除</el-button>
          <el-button type="text" @click="updateUser(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <add-user
      v-if="userVisible"
      :userVisible.sync="userVisible"
      :form="userDetail"
      :type="type"
      @reloadList="getList"
    ></add-user>
  </div>
</template>

<script>
import { formatterDate } from "@/assets/js/utils.js";
import addUser from "@/components/addUser";
export default {
  name: "user",
  components: { addUser },
  data() {
    return {
      list: [],
      userVisible: false,
      userDetail: {}
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.$axios({
        url: this.$api.user.getList,
        method: "post"
      }).then(res => {
        if (res.result == 200) {
          this.list = res.info.list;
        }
      });
    },
    getRealDate(row, column, cellValue, index) {
      return formatterDate(cellValue, "YY-MM-DD hh:mm:ss w");
    },
    showUser(type) {
      this.userVisible = true;
      this.type = type;
      if(type=="add"){
        this.userDetail = {};
      }
    },
    delUser(row) {
      let id = row.id;
      this.$confirm("是否确定删除该数据", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$axios({
          url: this.$api.user.del,
          method: "post",
          data: { id }
        }).then(res => {
          if(res.result==200){
            this.$message.success("删除成功");
            this.getList();
          }
        });
      });
    },
    updateUser(row){
      let id = row.id;
       this.$axios({
      url: this.$api.user.getDetailById,
      method: "post",
      data: {
       id
      }
    }).then(res => {
      if(res.result==200){
        this.userDetail = res.info.user;
        this.showUser('upd')
      }
    });
    }
  }
};
</script>

<style lang="less">
.table_header {
  margin-bottom: 14px;
  display: flex;
  justify-content: flex-end;
}
</style>